<template>
    <div class="big"> 
        <!-- 历史记录 -->
        <div class="history" v-show="isShowHistory">
            <h6><i>历史记录</i><van-icon name="delete" @click="clean" /></h6>
            <ul>
                <li v-for="(item,index) in searchHistoryData" :key="index" @click="gosearch(item)">
                    {{item}}
                </li>
            </ul>
        </div>
        <!-- 热门搜索 -->
        <div class="hot">
            <h6>热门搜索</h6>
            <ul>
                <li v-for="(item,index) in searchHotData" :key="index"
                @click="gosearch(item.keyword)">
                    {{item.keyword}}
                </li>
               
            </ul>
        </div>
    </div>
</template>

<script>
import {Clearhistory} from '@/https/http.js'
export default {
    name: 'WyProjectHistory',
    props:['searchHistoryData','searchHotData'],

    data() {
        return {
            isShowHistory:'true'
        };
    },
    created(){
       console.log(333,this.searchHistoryData)
     
    },

  

    methods: {
        clean(){
            Clearhistory().then(res=>{
                console.log(222,res)
                 if (res.errno == 0) {
                // 提示删除成功
                this.$toast.success("删除成功");
                // 隐藏历史记录
                this.isShowHistory = false;
                }
            })
        },
        gosearch(m){
            this.$emit('gosearch',m)

        }
    },
};
</script>

<style lang="less" scoped>
.big{
    .history{
        h6{
            margin: 15px 0;
            font-size: 17px;
            display: flex;
            justify-content: space-between;
        }
        ul{
            display: flex;
            li{
                font-size: 10px;
                border: 1px solid gray;
                margin: 0 2px;
            }
        }
    }
    .hot{
        h6{
            font-size: 17px;
            margin: 15px 0;
        }
        ul{
            display: flex;
            li:nth-of-type(1){
                color: red;
                font-size: 11px;
                border: 1px solid red;
            }
            li{
                color: black;
                border: 1px solid gray;
                font-size: 14px;
                margin: 0 3px;
            }
        }

    }
}
</style>